<template>
	<view class="uni_box">
		<CHome v-if="identity==1" ref="sonRef"  :aordernum="aordernum"  :backgroundColor="backgroundColor"></CHome>
		<AHome v-if="identity==2" :user="user" :aordernum="aordernum"  :backgroundColor="backgroundColor"></AHome>
    </view>
</template>

<script>
 import CHome from '@/pages/tabbar/components/Home/CHome'
 import AHome from '@/pages/tabbar/components/Home/AHome'
export default {
	components: {
		CHome,
		AHome
	},
	data() {
		return {
			tablist: [{
				name: '待收货'
			}, {
				name: '待付款'
			}, {
				name: '待评价'
			}],
			current: 0,
			noticlist: [
				'寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
				'平明送客楚山孤',
				'洛阳亲友如相问',
				'一片冰心在玉壶'
			],
			border: false,
			keyword: '',
			enable:false,
			Captop:0,
			offTop:0,
			shaishow:false,
			loginshow:false,
			userinfo:{
				mobile: "",
				token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwd2QiOiJkNDFkOGNkOThmMDBiMjA0ZTk4MDA5OThlY2Y4NDI3ZSIsImlzcyI6InpoYW9uaXVuaXUuc29uY3ouY29tIiwiYXVkIjoiemhhb25pdW5pdS5zb25jei5jb20iLCJpYXQiOjE3NDMzMTY4NTUsIm5iZiI6MTc0MzMxNjg1NSwiZXhwIjoxNzQ1OTA4ODU1LCJqdGkiOnsiaWQiOjQsInR5cGUiOiJhcGkifX0.SVy8FMBZpPCFY_Ud2FFalr2WLqEcvBqaoiopdD2WgbE"
			},
			seeion_key:'',

			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			keywords:'',
			backgroundColor:'none',
			identity:'',//1用户 2老板
			user:{},
			aordernum:0
		}
	},
	computed: {
	},

	mounted() {
		//在mounted中调用是确保元素已被加载
		//#ifdef MP-WEIXIN
		//通过getMenuButtonBoundingClientRect 获取胶囊的高度宽度等信息
		this.Cap = uni.getMenuButtonBoundingClientRect();
		
		this.Captop = this.Cap.top/ (uni.upx2px(100) / 100);
		
		//我们需要吸顶的位置 是计算出来的  胶囊的高度height+胶囊距离顶部状态栏的距离top
		let CapHeight = (this.Cap.height + this.Cap.top);
		//由于拿到的单位是px 通过uni自带的upx2px方法 将px转换为rpx 
		//这样做是因为uView的Sticky组件要求传入的offset-top值单位是rpx
		this.offTop =Number( CapHeight / (uni.upx2px(100) / 100))
		//最后拿到想要的值并传入即可
		this.enable = true
		//#endif
		//#ifdef H5
		this.offTop = 0
		//最后拿到想要的值并传入即可
		this.enable = true
		//#endif
	},
	async onLoad() {
		// console.log(this.$store.state.identity)
		
	},
	async onShow() {
		// console.log('分享携带参数'+this.$store.state.invite_code||uni.getStorageSync('invite_code'))
		if(this.$store.state.identity == 2){
			//
			this.identity = 2
		}else{
			this.identity = 1
		}

		this.getuser()
		this.aordernum++
		// this.$refs.sonRef.getshuaxin()
		// if(!uni.getStorageSync('token')){
		// 	// this.loginshow = true
		// 	// #ifdef MP
		// 	this.getLogin()
		// 	// #endif
		// #ifdef H5
		// uni.setStorageSync('token',this.userinfo.token)
		// uni.setStorageSync('userid',this.userinfo.user_id)
		// #endif
			
			
		// 	this.getInit()
		// }else{
		// 	this.getInit()
		// }
	},
	onReachBottom: function () {
		this.loadmore();
	},
	onPageScroll(e) {
		// console.log('页面滚动距离:', e.scrollTop);
		// 在这里编写滚动相关的逻辑
		if(e.scrollTop>=200){
			this.backgroundColor = '#ffffff'
		}else{
			this.backgroundColor = 'none'
		}
		this.$forceUpdate()
	},
	methods: {
		async getuser(){
			let res = await this.$u.api.user({
			});
			this.user = res.data
			if(res.data.code){
				this.$store.commit('changecode',res.data.code);
				uni.setStorageSync('code',res.data.code);//2老板
				
			}
		},
		async getLogin(){
			uni.login({
				provider: 'weixin',
				timeout: 3000,
				success: res => {
					console.log(res)
					this.$u.toast(res.code);
					this.copy(res.code)
					// this.loginshow = true
					if (res.code) {
						this.getLogintwo(res.code)
					}
				},
				fail: () => {
					uni.$u.toast("请求失败")
				}
			})
		},
		async getLogintwo(code){
			let res = await this.$u.api.miniapplogin({
				code:code
				// userid:uni.getStorageSync('userid')
			});
			console.log(res.userinfo)
			this.seeion_key = res.seeion_key
			uni.setStorageSync('token',res.userinfo.token)
			// uni.setStorageSync('userid',res.Data.userinfo.userid)
			if(res.userinfo.mobile == ''||!res.userinfo.mobile){
				//弹出登录
				this.loginshow = true
			}else{
				this.getInit()
			}
			// // console.log(res)
			// console.log(res.Data)
		},
		getInit(){//请求接口
			this.getGonggao();//公告
			this.getLun();//轮播图

			if(this.list==''){
				this.getList();//列表接口
			}
		},
		async getGonggao(){
			let res = await this.$u.api.noticeList({
			});
			let a = []
			for(let i in res){
				a.push(res[i].title)
			}
			this.noticlist = a
			console.log(res) 
		},
		async getLun(){
			let res = await this.$u.api.banner({
			});
			console.log(res) 
		},
		async getList(){//列表数据
			let res = await this.$u.api.project({
			  pagesize:this.limit,
			  page:this.page,
			  keywords:this.keywords
			});
			console.log(res)
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			// console.log(this.list)
			if(this.page >= this.last_page){
			  this.status = 'nomore';
			}
			
		},
		loadmore() {
			// let page = this.page;
			// // let last_page = this.last_page;
			// if (this.status == 'loadmore') {
			// 	this.page++;
			// 	this.getList();
			// }
			this.$refs.sonRef.loadmore()
		},
		tolink() {
			this.navrouter("/pages_client/sub/ceshi");
		},
		changeCate(index) {
			this.scrollLeft = 50 * (index - 1);
			this.currentindex = index
		},
		getdetail(){
			this.navrouter("/pages_client/twoPage/Detail");
		},
		blur(){
			this.getClear()
		},
		getClear(){
			this.list = []
			this.page = 1,
			this.status= "loadmore"
			this.getList()
		},
		onUserInfoClick(e){
			console.log(e)
			if(e.code == 200){
				this.loginshow = false
				this.getInit()
			}
		},
		change(e){

		}

	}
}
</script>

<style lang="scss" scoped>
page,
html {
	background-color: rgba(246, 247, 249, 1);
}

/deep/ .u-sticky {
	z-index: 1007500000 !important;
}

.gllogo {
	width: 237rpx;
	height: 67rpx;
}
.bghome{
	width: 100%;
	position: absolute;
	top: 0;
	height: 550rpx;
	
}

.hleft {
	position: absolute;
	left: 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.icon_dw{
		width: 32rpx;
		height: 32rpx;
	}
	.icon_sx{
		margin-left: 14rpx;
		width: 24rpx;
		height: 24rpx;
	}
	.adname{
		font-weight: 500;
		font-size: 28rpx;
		color: #111111;
		display: block;
		max-width: 400rpx;
		margin-left: 8rpx;
	}
}

.ptong {
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.newcontent {
	padding: 0rpx 0 88rpx;

	display: flex;
	flex-direction: column;
	position: relative;
	// #ifdef MP-WEIXIN
	padding-bottom: 10rpx;
	// #endif
	.hone{
		display: flex;
		flex-direction: column;
		padding: 20rpx 35rpx 10rpx;
		.hbiao{
			display: flex;
			flex-direction: row;
			align-items: center;
			.bleft{
				display: flex;
				flex-direction: column;
				width: 60%;
				.bt{
					font-weight: bold;
					font-size: 56rpx;
					color: #111111;
				}
				.btmiao{
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					display: block;
					margin: 15rpx 0 20rpx;
				}
				.bqian{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					justify-content: space-between;
					.qians{
						display: flex;
						flex-direction: row;
						align-items: center;
						
						.qiansicon{
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
						.qname{
							font-weight: 500;
							font-size: 24rpx;
							color: #FF823F;
						}
					}
				}
			}
			.img_zs{
				margin-left: auto;
				width: 179rpx;
				height: 158rpx;
			}
		}
	    .hling{
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;
			.linitemone{
				width: 335rpx;
				height: 160rpx;
				position: relative;
				.img_bjone{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.items{
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 30rpx;
					.lname{
						font-weight: 800;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.jiename{
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						display: block;
						margin-top: 10rpx;
					}
				}
			}
			.linitemtwo{
				width: auto;
				flex: 1;
				// margin: 0 8rpx;
				margin-left: 18rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				
				.items{
					padding: 20rpx;
					width: 100%;
					height: 100%;
					position: relative;
					.lname{
						font-weight: 800;
						font-size: 26rpx;
						color: #333333;
					}
					.jiename{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
						margin-top: 7rpx;
					}
					.img_gw{
						position: absolute;
						width: 75rpx;
						height: 75rpx;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}
	.notic {
		margin: 20rpx 20rpx;
		padding: 4rpx 30rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.icon_gg {
			width: 30rpx;
			height: 30rpx;
			display: inline-block;
		}

		.noticright {
			width: 85%;
		}
		.gongshi{
			width: 130rpx;
			height: 40rpx;
			background: #FFEFE9;
			border-radius: 20rpx;
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 20rpx;
			color: #EA5918;
		}
	}
	.list{
		background: linear-gradient(180deg, #FFFFFF, #F6F7F9);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 20rpx 30rpx 30rpx;
		min-height: 60vh;
		.souitem{
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			.souleft{
				display: flex;
				width: 50%;
				.shua{
					position: relative;
					margin-right: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 10rpx;
					.huaname{
						font-weight: 500;
						font-size: 32rpx;
						color: #999999;
					}
					.huabot{
						width: 60%;
						left: 20%;
						position: absolute;
						width: 48rpx;
						height: 6rpx;
						background: linear-gradient(90deg, #FF8F39, #FF4D43);
						bottom: 0;
						display: none;
						
					}
				}
				.sactive{
					.huaname{
						font-weight: bold;
						font-size: 36rpx;
						color: #111111;
					}
					.huabot{
						display: inline-block;
					}
				}
			}
			.shainame{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				padding: 8rpx 20rpx;
				background: #EEEEEE;
				border-radius: 29rpx;
				align-items: center;
				.icon_xz{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
				.icoN_ss{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}
		}
		.litem{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0rpx #EEEEEE;
			border-radius: 30rpx;
			margin-bottom: 24rpx;
			.ione{
				height: 60rpx;
				background: #FFEFE9;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				padding: 0 30rpx;
				align-items: center;
				.riqi{
					font-weight: bold;
					font-size: 26rpx;
					color: #111111;
				}
				.qitime{
					font-weight: bold;
					font-size: 26rpx;
					color: #EA5918;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
			.itwo{
				padding: 30rpx;
				display: flex;
				flex-direction: column;
			}
			.name{
				font-weight: bold;
				font-size: 40rpx;
				color: #111111;
				margin-bottom: 15rpx;
				display: block;
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: #F07F4C;
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top: 40rpx;
				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
				}
			}
			.bmright{
				margin-left: auto;
				width:185rpx;
				height: 56rpx;
				position: relative;
				.img_an{
					position: absolute;
					width: 100%;
					height: 100%;

				}
				.bmitem{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					padding-left: 22rpx;
				}
			}
		}
	}

	.fenlei {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.fenitem {
			flex: 1;
			max-width: 25%;
			margin: 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.navimg {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.fenitem:first-child {
			margin-left: 0;
		}

		.fenitem:last-child {
			margin-right: 0;
		}
	}

	.tuilist {
		display: flex;
		margin: 0rpx 0 0rpx;
		background-color: #fff;
		padding: 40rpx 0 20rpx;
		.tuiview {
			width: 100%;
			white-space: nowrap;

			.tuiitem {
				display: inline-block;
				// margin-right: 50rpx;
				position: relative;
				padding-bottom: 14rpx;
				width: 100rpx;
				text-align: center;

				.tuiname {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.xuans {
					width: 50%;
					position: absolute;
					left: 25%;
					bottom: 0;
					height: 14rpx;
					display: none;
				}
			}

			.tactive {
				.tuiname {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: $Themecolor;
				}

				.xuans {
					display: inline-block;
				}
			}

		}
	}

	.souview {
		margin: 0 0 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		// height: 90rpx;
		padding: 0rpx 20rpx 20rpx;

		.souleft {
			width: 80%;
			border: 1rpx solid #CCCCCC;
			border-radius: 10rpx;
			height: 60rpx;
			padding: 0rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon_sousuo {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}

		.shaixuan {
			margin-left: auto;
			width: 100rpx;
			height: 60rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.icon_ss {
				width: 12rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}

			text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
		}
	}

	.hlist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.hitem {
			width: 48%;
			min-height: 400rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(107, 107, 107, 0.07);

			.hone {
				width: 100%;
				height: 330rpx;
				border-radius: 20rpx 20rpx 0 0;

				.listimg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

			}

			.htwo {
				padding: 15rpx 15rpx 25rpx;

				.hname {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列

				}

				.hmiao {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					display: block;
					margin-top: 8rpx;
				}
			}
		}

		.hitem:nth-child(even) {
			margin-left: auto;
		}
	}
}


.txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.immerse {
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	background-color: #fff;
	// #ifdef APP-PLUS
	height: calc(var(--status-bar-height);
			// #endif
			z-index: 1007500000;
			position: relative;
	}</style>
